<script setup>
  import { updateInfo } from '@/api/customer/info';
  import getSearchConfig from '../config/userDialogSearch.js'
  import getContentConfig from '../config/userContent.js'
  import to from '@/utils/to'
  import { systemBaseUrl } from '@/api/config/base.js'
  import {
    insertFilePermissionBatch,
    sharedList,
    deleteFilePermission
  } from "@/api/file/file";
  import {ElNotification} from "element-plus";

  const props = defineProps({
    modelValue: {
      type: Boolean,
    },
    fileValue: {

    }
  })
  const emits = defineEmits(['update:modelValue', 'saveSuccess'])

  const { proxy } = getCurrentInstance()
  const { sys_normal_disable, sys_user_sex, user_type } = proxy.useDict(
    'sys_normal_disable',
    'sys_user_sex',
    'user_type'
  )
  const route = useRoute()
  const pageContentRef = ref(null)
  const pageSearchRef = ref(null)
  const pageName = ''
  const requestUrl = 'user/listAll'
  const requestBaseUrl = systemBaseUrl

  const tableHideItems = ref(['todo'])
  const searchConfig = getSearchConfig()
  const contentConfig = getContentConfig()
  const sharedListData = ref([])


  const contentConfigComputed = computed(() => {
    contentConfig.hideItems = tableHideItems
    return contentConfig
  })

  const tableSelected = ref([])
  const tableListener = {
    selectionChange: (selected) => {
      tableSelected.value = selected
      console.log("selectionChange: ", tableSelected.value)
    },
  }
  const search = () => {
    console.log('search...')
    pageSearchRef.value?.search()
  }

  const descConfig = ref({})

  const headerButtons = []

  const showPageSearch = ref(true)

  const loading = ref(false)

  const commitClick = async () => {
    if (tableSelected.value.length === 0) {
      proxy.$modal.msgWarning('请勾选用户')
      return
    }
    loading.value = true
    const selectItems = tableSelected.value.map((item) => item)
    console.log('selectItems:', selectItems, 'fileValue:', props.fileValue)

    let fileId = props.fileValue.fileId
    let data = []
    for (let user of selectItems) {
      let item = {
        fileId: fileId,
        userName: user.userName,
      }
      data.push(item)
    }
    console.log('data:', data)
    const [err, res] = await to(insertFilePermissionBatch(data))
    if (res) {

    }
    querySharedList()
    loading.value = false
    closeDialog()
  }

  const openDialog = () => {
    console.log('daliogOpen...fileValue:', props.fileValue)
    //查询分享人员列表
    querySharedList()
  }

  const handleCancel = () => {
    console.log('handleCancel')
    handleValueChange(false)
  }

  const handleValueChange = (value) => {
    console.log('handleValueChange:', value)
    emits('update:modelValue', value)
  }
  const /**/closeDialog = () => {
    emits('update:modelValue', false)
  }
  const querySharedList = async () => {
    let params = {
      fileId: props.fileValue.fileId,
      pageNum: 1,
      pageSize: 100
    }
    const [error, res] = await to(sharedList(params))
    if(res){
      let shareList = res.rows
      sharedListData.value = shareList
    }
  }
  const addToShareList = () => {
    commitClick()
  }
  const deleteShare = async (data) => {
    console.log('deleteShare:', data)
    let id = data.id
    const [error, res] = await to(deleteFilePermission(id))
    if(res){
      //查询分享人员列表
      querySharedList()
    }
  }
</script>
<template>
  <div class="authUserDialog">
    <el-dialog
      width="980px"
      top="0vh"
      title="选择用户"
      :model-value="modelValue"
      :close-on-click-modal="false"
      @open="openDialog"
      @update:modelValue="handleValueChange($event)"
      destroy-on-close
    >
      <div class="dialog-container">
        <div class="left">
          <PageSearch
            v-show="showPageSearch"
            ref="pageSearchRef"
            :pageName="pageName"
            :searchConfig="searchConfig"
          ></PageSearch>
          <div class="add-container">
            <el-button type="primary" @click="addToShareList">分享</el-button>
          </div>
          <PageContent
            ref="pageContentRef"
            :pageName="pageName"
            :contentConfig="contentConfigComputed"
            :descConfig="descConfig"
            :showPageSearch="showPageSearch"
            :headerButtons="headerButtons"
            :showEdit="false"
            :showDelete="false"
            :requestUrl="requestUrl"
            :tableListener="tableListener"
            :requestBaseUrl="requestBaseUrl"
          >
            <template #statusSlot="{ backData }">
              <el-tag
                :type="backData.status == '0' ? 'success' : 'danger'"
                class="mx-1"
                effect="light"
              >
                {{ backData.status == '0' ? '正常' : '禁用' }}
              </el-tag>
            </template>
            <template #userTypeSlot="{ backData }">
              <dict-tag :options="user_type" :value="backData.userType"/>
            </template>
          </PageContent>
        </div>

        <div class="right">
          <div class="shared-title">
            分享列表
          </div>
          <div class="shared-list" v-if="sharedListData.length > 0">
            <el-scrollbar height="700px">
              <div class="shared-item" v-for="item in sharedListData">
                <div>{{item.nickName}}</div>
                <div @click="deleteShare(item)">
                  <el-icon size="18" color="#409eff"><Close /></el-icon>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div v-else>
            <el-empty :image-size="200" description="暂无人员"/>
          </div>
        </div>
        <div class="close-container">
          <el-icon size="20" @click="closeDialog"><Close /></el-icon>
        </div>
      </div>
      <template #header>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
  .authUserDialog {
    :deep(.el-pagination) {
      padding-top: 0px;
    }
    :deep(.el-dialog__body) {
      padding-bottom: 0px;
    }
    :deep(.el-dialog__header) {
      display: none;
    }

  }
  .close-container{
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
  }
  .dialog-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
  .left{
    width: 85%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;


  }
  .add-container{
    margin: 5px;
  }
  .right{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 30%;
    margin-left: 5px;
    height: 750px;
    top: 0;
    bottom: 0;
  }
  .shared-title{
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 16px;
  }
  .shared-list{
    width: 100%;
  }
  .shared-item{
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 3px 0px;
    padding: 5px;
  }
</style>
